<template>
  <div style=" height:600px;padding-bottom: 100px;background: #f6f7f9;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="接单大厅" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
    </van-sticky>
    <div style="text-align: left;">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            :finished="finished"
            finished-text="没有更多了"
        >
          <van-swipe-cell v-for="item in waitOrderList">
            <van-cell center style="margin-top: 10px">
              <template #title>
              <span class="custom-title"
                    style="font-weight: bold; font-size: 17px; color: deepskyblue">{{ item.name }}</span>
              </template>
              <template #label>
                <div style="font-weight: bold; color: #333333; width: 280px;">
                  <span>快递站点：{{ item.company }}</span>
                </div>
                <div style="font-weight: bold; color: #333333; width: 280px;">
                  <span>配送地址：{{ item.address }}</span>
                </div>
                <div style="font-weight: bold; color: #333333;width: 280px;">
                  <span>创建时间：{{ item.createTime }}</span>
                </div>
              </template>
              <template #right-icon>
                <van-button square type="info" @click="receiveOrder(item.id,item.sn)" style="border-radius: 8px; box-shadow: 2px 2px 2px #333333">接单</van-button>
              </template>
            </van-cell>
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
    </div>

  </div>
</template>

<script>
export default {

  data() {
    return {
      waitOrderList: [
        {
          id: '',
          sn:'',
          company: '中通快递',
          address: '江西省宜春市袁州区宜春学院',
          status: '等待接单',
          isEvaluate:'',
          createTime: '2023-01-11T11:29:49',
        },
      ],
      receiveInfo:{
        sn:'',
      },
      isLoading: false,
      finished: false,
      refreshing: false,
    }
  },

  mounted() {
    this.loadWaitOrderList();
  },

  methods: {
    //加载订单列表
    loadWaitOrderList(){
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/wait';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody=response.data.data;
        this.waitOrderList = responseBody;
      })
    },
    receiveOrder(id,sn){
      this.$dialog.confirm({
        title: '接单',
        message: '是否接该订单？',
      })
          .then(() => {
            let url = 'http://localhost:9080/orders/'+id+'/receive';
            this.receiveInfo.sn=sn;
            let receiveInfo = this.qs.stringify(this.receiveInfo, {arrayFormat: 'repeat'});
            console.log('receiveInfo = ' + receiveInfo);
            this.axios
                .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
                .post(url, receiveInfo).then((response) => {
              let responseBody = response.data;
              console.log(responseBody);
              if (responseBody.state == 20000) {
                this.$toast.success('接单成功!');
                this.loadWaitOrderList();
              }else{
                this.$toast.fail(responseBody.message);
              }
            });
          })
          .catch(() => {
            // on cancel
          });
    },
    onRefresh() {
      setTimeout(() => {
        this.loadWaitOrderList();
        this.refreshing = false;
      }, 1000);
    },
  },
};
</script>

<style scoped>
/** 自定义分割线 */
.divider {
  height: 15px;
  background: #eee;
}

/** 订单列表项样式 */
.orderlist-item .title,
.orderlist-item .footer {
  margin: 10px 0px;
  color: #666;
}

.orderlist-item .product-item {
  margin-bottom: 3px;
}
</style>
